<template>
  <!-- 搜索区域 -->
   <!-- 2341209060116 敖文江 -->
  <div class="search-section">
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="商品名">
        <el-input 
          v-model="searchForm.name" 
          placeholder="请输入商品名" 
          clearable
          @keyup.enter="handleSearch"
        />
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  
  <div class="goods-section">
    <!-- 商品详情框 -->
    <el-row :gutter="20">
      <el-col 
        v-for="(item, index) in paginatedTableData" 
        :key="index" 
        :span="8" 
        style="margin-bottom: 20px;"
      >
        <el-card class="goods-card">
          <div class="goods-content">
            <h3>{{ item.name }}</h3>
             <!-- 商品编号 -->
             <el-tag>编号: {{ item.id }}</el-tag>
            <p>日期: {{ item.date }}</p>
            <p>地址: {{ item.address }}</p>
            <p>
              星级: 
              <el-rate
                v-model="item.star"
                disabled
                show-score
                text-color="#ff9900"
              />
            </p>
           
            <el-button 
              type="primary" 
              @click="goToDetail(item)"
              style="margin-top: 10px;"
            >
              详情
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <!-- 分页区域 -->
  <div class="pagination-section">
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[3, 6, 9, 18]"
      :total="filteredTableData.length"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

// 使用路由
const router = useRouter()

// 商品列表
const tableData = ref([
  { id: 1, date: '2016-05-02', name: '苹果', address: '山东烟台', star: 5 },
  { id: 2, date: '2016-05-03', name: '香蕉', address: '海南三亚', star: 4 },
  { id: 3, date: '2016-05-04', name: '橙子', address: '江西赣州', star: 3 },
  { id: 4, date: '2016-05-05', name: '葡萄', address: '新疆吐鲁番', star: 5 },
  { id: 5, date: '2016-05-06', name: '西瓜', address: '陕西西安', star: 4 },
  { id: 6, date: '2016-05-07', name: '桃子', address: '河北保定', star: 3 },
  { id: 7, date: '2016-05-08', name: '梨子', address: '安徽砀山', star: 4 },
  { id: 8, date: '2016-05-09', name: '草莓', address: '辽宁丹东', star: 5 },
  { id: 9, date: '2016-05-10', name: '芒果', address: '四川攀枝花', star: 4 },
  { id: 10, date: '2016-05-11', name: '菠萝', address: '广东湛江', star: 3 },
  { id: 11, date: '2016-05-12', name: '樱桃', address: '山东青岛', star: 5 },
  { id: 12, date: '2016-05-13', name: '柠檬', address: '四川安岳', star: 2 },
  { id: 13, date: '2016-05-14', name: '柚子', address: '福建平和', star: 4 },
  { id: 14, date: '2016-05-15', name: '猕猴桃', address: '陕西周至', star: 4 },
  { id: 15, date: '2016-05-16', name: '石榴', address: '云南蒙自', star: 3 },
  { id: 16, date: '2016-05-17', name: '椰子', address: '海南文昌', star: 2 },
  { id: 17, date: '2016-05-18', name: '火龙果', address: '广西南宁', star: 4 },
  { id: 18, date: '2016-05-19', name: '哈密瓜', address: '新疆哈密', star: 3 },
  { id: 19, date: '2016-05-20', name: '蓝莓', address: '贵州黔东南', star: 5 },
  { id: 20, date: '2016-05-21', name: '荔枝', address: '广东茂名', star: 4 }
])

// 搜索表单
const searchForm = reactive({
  name: '',
  star: null
})

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 3
})

// 根据搜索条件过滤数据
const filteredTableData = computed(() => {
  return tableData.value.filter(item => {
    return (
      (searchForm.name ? item.name.includes(searchForm.name) : true) &&
      (searchForm.star ? item.star === searchForm.star : true)
    )
  })
})

// 计算当前页的数据
const paginatedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize
  const end = start + pagination.pageSize
  return filteredTableData.value.slice(start, end)
})

// 编辑表单引用
const editFormRef = ref(null)

// 分页大小改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.currentPage = 1
}

// 当前页改变
const handleCurrentChange = (val) => {
  pagination.currentPage = val
}

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
}

// 重置搜索
const resetSearch = () => {
  searchForm.name = ''
  searchForm.star = null
  pagination.currentPage = 1
}
// 跳转到详情页
const goToDetail = (item) => {
  // 这里可以跳转到详情页面，根据实际路由配置进行调整
  router.push(`/goods-detail/${item.id}`)
  // 或者使用 query 参数: 
  // router.push({ path: '/goods-detail', query: { id: item.date }})
}
</script>

<style scoped>
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-form .el-form-item {
  margin-right: 20px;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.goods-section {
  min-height: 400px;
  margin-bottom: 20px;
}

.goods-card {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.goods-content {
  text-align: center;
}

.goods-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.goods-content p {
  margin: 5px 0;
}
</style>